---
title: Buttons
topTitle: Components
icon: fa fa-gamepad
scripts:
- Metis.metisButton()
---
<div class="row">
        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Default Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-default btn-sm" data-toggle="collapse" data-target="#div1">default</button>
                    </div>
                </header>
                <div class="body collapse in" id="div1">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default">default</a>
                    <a href="#" class="btn btn-primary">primary</a>
                    <a href="#" class="btn btn-danger">danger</a>
                    <a href="#" class="btn btn-success">success</a>
                    <a href="#" class="btn btn-info">info</a>
                    <a href="#" class="btn btn-warning">warning</a>

                    <a href="#" class="btn btn-metis-1">metis-1</a>
                    <a href="#" class="btn btn-metis-2">metis-2</a>
                    <a href="#" class="btn btn-metis-3">metis-3</a>
                    <a href="#" class="btn btn-metis-4">metis-4</a>
                    <a href="#" class="btn btn-metis-5">metis-5</a>
                    <a href="#" class="btn btn-metis-6">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs">default</a>
                    <a href="#" class="btn btn-primary btn-xs">primary</a>
                    <a href="#" class="btn btn-danger btn-xs">danger</a>
                    <a href="#" class="btn btn-success btn-xs">success</a>
                    <a href="#" class="btn btn-info btn-xs">info</a>
                    <a href="#" class="btn btn-warning btn-xs">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm">default</a>
                    <a href="#" class="btn btn-primary btn-sm">primary</a>
                    <a href="#" class="btn btn-danger btn-sm">danger</a>
                    <a href="#" class="btn btn-success btn-sm">success</a>
                    <a href="#" class="btn btn-info btn-sm">info</a>
                    <a href="#" class="btn btn-warning btn-sm">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg">default</a>
                    <a href="#" class="btn btn-primary btn-lg">primary</a>
                    <a href="#" class="btn btn-danger btn-lg">danger</a>
                    <a href="#" class="btn btn-success btn-lg">success</a>
                    <a href="#" class="btn btn-info btn-lg">info</a>
                    <a href="#" class="btn btn-warning btn-lg">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->


        <div class="col-lg-12">
            <div class="box">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Line Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-danger btn-sm btn-line" data-toggle="collapse" data-target="#div2">line</button>
                    </div>
                </header>
                <div class="body collapse in" id="div2">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-line">success</a>
                    <a href="#" class="btn btn-info btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-line">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-line">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-line">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-line">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-line">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-line">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-line">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->



        <div class="col-lg-12">
            <div class="box warning">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Rectangle Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-success btn-sm btn-rect" data-toggle="collapse" data-target="#div3">rectangle</button>
                    </div>
                </header>
                <div class="body collapse in" id="div3">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-rect">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-rect">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-rect">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-rect">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->



        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Circle Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-success btn-sm btn-circle" data-toggle="collapse" data-target="#div4">c</button>
                    </div>
                </header>
                <div class="body collapse in" id="div4">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-circle">de</a>
                    <a href="#" class="btn btn-primary btn-circle">pr</a>
                    <a href="#" class="btn btn-danger btn-circle">da</a>
                    <a href="#" class="btn btn-success btn-circle">su</a>
                    <a href="#" class="btn btn-info btn-circle">in</a>
                    <a href="#" class="btn btn-warning btn-circle">wa</a>

                    <a href="#" class="btn btn-metis-1 btn-circle">m1</a>
                    <a href="#" class="btn btn-metis-2 btn-circle">m2</a>
                    <a href="#" class="btn btn-metis-3 btn-circle">m3</a>
                    <a href="#" class="btn btn-metis-4 btn-circle">m4</a>
                    <a href="#" class="btn btn-metis-5 btn-circle">m5</a>
                    <a href="#" class="btn btn-metis-6 btn-circle">m6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-circle">d</a>
                    <a href="#" class="btn btn-primary btn-xs btn-circle">p</a>
                    <a href="#" class="btn btn-danger btn-xs btn-circle">d</a>
                    <a href="#" class="btn btn-success btn-xs btn-circle">s</a>
                    <a href="#" class="btn btn-info btn-xs btn-circle">i</a>
                    <a href="#" class="btn btn-warning btn-xs btn-circle">w</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-circle">1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-circle">2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-circle">3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-circle">4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-circle">5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-circle">6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-circle">d</a>
                    <a href="#" class="btn btn-primary btn-sm btn-circle">p</a>
                    <a href="#" class="btn btn-danger btn-sm btn-circle">d</a>
                    <a href="#" class="btn btn-success btn-sm btn-circle">s</a>
                    <a href="#" class="btn btn-info btn-sm btn-circle">i</a>
                    <a href="#" class="btn btn-warning btn-sm btn-circle">w</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-circle">1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-circle">2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-circle">3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-circle">4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-circle">5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-circle">6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-circle">def</a>
                    <a href="#" class="btn btn-primary btn-lg btn-circle">pri</a>
                    <a href="#" class="btn btn-danger btn-lg btn-circle">dan</a>
                    <a href="#" class="btn btn-success btn-lg btn-circle">suc</a>
                    <a href="#" class="btn btn-info btn-lg btn-circle">inf</a>
                    <a href="#" class="btn btn-warning btn-lg btn-circle">war</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-circle">m-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-circle">m-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-circle">m-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-circle">m-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-circle">m-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-circle">m-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->


        <div class="col-lg-12">
            <div class="box success">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Rounded Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-primary btn-sm btn-round" data-toggle="collapse" data-target="#div5">round</button>
                    </div>
                </header>
                <div class="body collapse in" id="div5">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-round">default</a>
                    <a href="#" class="btn btn-primary btn-round">primary</a>
                    <a href="#" class="btn btn-danger btn-round">danger</a>
                    <a href="#" class="btn btn-success btn-round">success</a>
                    <a href="#" class="btn btn-info btn-round">info</a>
                    <a href="#" class="btn btn-warning btn-round">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-round">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-round">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-round">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-round">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-round">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-round">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-round">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-round">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-round">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-round">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-round">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-round">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-round">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-round">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-round">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-round">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-round">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-round">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-round">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-round">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-round">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-round">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-round">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-round">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-round">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-round">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-round">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-round">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-round">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-round">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-round">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-round">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-round">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-round">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-round">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-round">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-round">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-round">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-round">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-round">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-round">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-round">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->




        <div class="col-lg-12">
            <div class="box inverse">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Flat Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-info btn-sm btn-flat" data-toggle="collapse" data-target="#div6">flat</button>
                    </div>
                </header>
                <div class="body collapse in" id="div6">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-flat">default</a>
                    <a href="#" class="btn btn-primary btn-flat">primary</a>
                    <a href="#" class="btn btn-danger btn-flat">danger</a>
                    <a href="#" class="btn btn-success btn-flat">success</a>
                    <a href="#" class="btn btn-info btn-flat">info</a>
                    <a href="#" class="btn btn-warning btn-flat">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-flat">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-flat">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-flat">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-flat">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-flat">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-flat">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-flat">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-flat">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-flat">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-flat">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-flat">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-flat">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-flat">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-flat">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-flat">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-flat">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-flat">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-flat">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-flat">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-flat">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-flat">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-flat">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-flat">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-flat">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-flat">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-flat">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-flat">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-flat">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-flat">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-flat">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-flat">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-flat">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-flat">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-flat">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-flat">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-flat">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-flat">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-flat">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-flat">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-flat">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-flat">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-flat">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->


        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Gradient Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-default btn-sm btn-grad" data-toggle="collapse" data-target="#div7">gradient</button>
                    </div>
                </header>
                <div class="body collapse in" id="div7">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-grad">default</a>
                    <a href="#" class="btn btn-primary btn-grad">primary</a>
                    <a href="#" class="btn btn-danger btn-grad">danger</a>
                    <a href="#" class="btn btn-success btn-grad">success</a>
                    <a href="#" class="btn btn-info btn-grad">info</a>
                    <a href="#" class="btn btn-warning btn-grad">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-grad">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-grad">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-grad">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-grad">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-grad">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-grad">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-grad">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-grad">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-grad">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-grad">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-grad">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-grad">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-grad">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-grad">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-grad">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-grad">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-grad">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-grad">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-grad">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-grad">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-grad">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-grad">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-grad">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-grad">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-grad">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-grad">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-grad">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-grad">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-grad">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-grad">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-grad">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-grad">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-grad">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-grad">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-grad">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-grad">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-grad">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-grad">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-grad">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-grad">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-grad">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-grad">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->


        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Gradient & Rectangle Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-default btn-sm btn-grad btn-rect" data-toggle="collapse" data-target="#div8">gradient & rectangle</button>
                    </div>
                </header>
                <div class="body collapse in" id="div8">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-grad btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-grad btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-grad btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-grad btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-grad btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-grad btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-grad btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-grad btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-grad btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-grad btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-grad btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-grad btn-rect">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-grad btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-grad btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-grad btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-grad btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-grad btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-grad btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-grad btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-grad btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-grad btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-grad btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-grad btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-grad btn-rect">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-grad btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-grad btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-grad btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-grad btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-grad btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-grad btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-grad btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-grad btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-grad btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-grad btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-grad btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-grad btn-rect">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-grad btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-grad btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-grad btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-grad btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-grad btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-grad btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-grad btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-grad btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-grad btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-grad btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-grad btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-grad btn-rect">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->


        <div class="col-lg-12">
            <div class="box primary">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Flat & Rectangle Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-info btn-sm btn-flat btn-rect" data-toggle="collapse" data-target="#div9">flat & rectangle</button>
                    </div>
                </header>
                <div class="body collapse in" id="div9">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-flat btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-flat btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-flat btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-flat btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-flat btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-flat btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-flat btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-flat btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-flat btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-flat btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-flat btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-flat btn-rect">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-flat btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-flat btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-flat btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-flat btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-flat btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-flat btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-flat btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-flat btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-flat btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-flat btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-flat btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-flat btn-rect">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-flat btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-flat btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-flat btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-flat btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-flat btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-flat btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-flat btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-flat btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-flat btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-flat btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-flat btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-flat btn-rect">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-flat btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-flat btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-flat btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-flat btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-flat btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-flat btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-flat btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-flat btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-flat btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-flat btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-flat btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-flat btn-rect">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->



        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Line & Rectangle Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-info btn-sm btn-line btn-rect" data-toggle="collapse" data-target="#div10">line & rectangle</button>
                    </div>
                </header>
                <div class="body collapse in" id="div10">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-line btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-line btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-line btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-line btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-line btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-line btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-line btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-line btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-line btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-line btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-line btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-line btn-rect">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-line btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-line btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-line btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-line btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-line btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-line btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-line btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-line btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-line btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-line btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-line btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-line btn-rect">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-line btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-line btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-line btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-line btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-line btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-line btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-line btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-line btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-line btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-line btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-line btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-line btn-rect">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-line btn-rect">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-line btn-rect">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-line btn-rect">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-line btn-rect">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-line btn-rect">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-line btn-rect">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-line btn-rect">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-line btn-rect">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-line btn-rect">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-line btn-rect">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-line btn-rect">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-line btn-rect">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->



        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Circle & Line Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-success btn-sm btn-circle btn-line" data-toggle="collapse" data-target="#div11">c</button>
                    </div>
                </header>
                <div class="body collapse in" id="div11">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-circle btn-line">de</a>
                    <a href="#" class="btn btn-primary btn-circle btn-line">pr</a>
                    <a href="#" class="btn btn-danger btn-circle btn-line">da</a>
                    <a href="#" class="btn btn-success btn-circle btn-line">su</a>
                    <a href="#" class="btn btn-info btn-circle btn-line">in</a>
                    <a href="#" class="btn btn-warning btn-circle btn-line">wa</a>

                    <a href="#" class="btn btn-metis-1 btn-circle btn-line">m1</a>
                    <a href="#" class="btn btn-metis-2 btn-circle btn-line">m2</a>
                    <a href="#" class="btn btn-metis-3 btn-circle btn-line">m3</a>
                    <a href="#" class="btn btn-metis-4 btn-circle btn-line">m4</a>
                    <a href="#" class="btn btn-metis-5 btn-circle btn-line">m5</a>
                    <a href="#" class="btn btn-metis-6 btn-circle btn-line">m6</a>
                    <hr>

                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-circle btn-line">d</a>
                    <a href="#" class="btn btn-primary btn-xs btn-circle btn-line">p</a>
                    <a href="#" class="btn btn-danger btn-xs btn-circle btn-line">d</a>
                    <a href="#" class="btn btn-success btn-xs btn-circle btn-line">s</a>
                    <a href="#" class="btn btn-info btn-xs btn-circle btn-line">i</a>
                    <a href="#" class="btn btn-warning btn-xs btn-circle btn-line">w</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-circle btn-line">1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-circle btn-line">2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-circle btn-line">3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-circle btn-line">4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-circle btn-line">5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-circle btn-line">6</a>
                    <hr>

                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-circle btn-line">d</a>
                    <a href="#" class="btn btn-primary btn-sm btn-circle btn-line">p</a>
                    <a href="#" class="btn btn-danger btn-sm btn-circle btn-line">d</a>
                    <a href="#" class="btn btn-success btn-sm btn-circle btn-line">s</a>
                    <a href="#" class="btn btn-info btn-sm btn-circle btn-line">i</a>
                    <a href="#" class="btn btn-warning btn-sm btn-circle btn-line">w</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-circle btn-line">1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-circle btn-line">2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-circle btn-line">3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-circle btn-line">4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-circle btn-line">5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-circle btn-line">6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-circle btn-line">def</a>
                    <a href="#" class="btn btn-primary btn-lg btn-circle btn-line">pri</a>
                    <a href="#" class="btn btn-danger btn-lg btn-circle btn-line">dan</a>
                    <a href="#" class="btn btn-success btn-lg btn-circle btn-line">suc</a>
                    <a href="#" class="btn btn-info btn-lg btn-circle btn-line">inf</a>
                    <a href="#" class="btn btn-warning btn-lg btn-circle btn-line">war</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-circle btn-line">m-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-circle btn-line">m-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-circle btn-line">m-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-circle btn-line">m-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-circle btn-line">m-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-circle btn-line">m-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->




        <div class="col-lg-12">
            <div class="box danger">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Circle & Gradient Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-success btn-sm btn-circle btn-grad" data-toggle="collapse" data-target="#div12">c</button>
                    </div>
                </header>
                <div class="body collapse in" id="div12">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-circle btn-grad">de</a>
                    <a href="#" class="btn btn-primary btn-circle btn-grad">pr</a>
                    <a href="#" class="btn btn-danger btn-circle btn-grad">da</a>
                    <a href="#" class="btn btn-success btn-circle btn-grad">su</a>
                    <a href="#" class="btn btn-info btn-circle btn-grad">in</a>
                    <a href="#" class="btn btn-warning btn-circle btn-grad">wa</a>

                    <a href="#" class="btn btn-metis-1 btn-circle btn-grad">m1</a>
                    <a href="#" class="btn btn-metis-2 btn-circle btn-grad">m2</a>
                    <a href="#" class="btn btn-metis-3 btn-circle btn-grad">m3</a>
                    <a href="#" class="btn btn-metis-4 btn-circle btn-grad">m4</a>
                    <a href="#" class="btn btn-metis-5 btn-circle btn-grad">m5</a>
                    <a href="#" class="btn btn-metis-6 btn-circle btn-grad">m6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-circle btn-grad">d</a>
                    <a href="#" class="btn btn-primary btn-xs btn-circle btn-grad">p</a>
                    <a href="#" class="btn btn-danger btn-xs btn-circle btn-grad">d</a>
                    <a href="#" class="btn btn-success btn-xs btn-circle btn-grad">s</a>
                    <a href="#" class="btn btn-info btn-xs btn-circle btn-grad">i</a>
                    <a href="#" class="btn btn-warning btn-xs btn-circle btn-grad">w</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-circle btn-grad">1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-circle btn-grad">2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-circle btn-grad">3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-circle btn-grad">4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-circle btn-grad">5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-circle btn-grad">6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-circle btn-grad">d</a>
                    <a href="#" class="btn btn-primary btn-sm btn-circle btn-grad">p</a>
                    <a href="#" class="btn btn-danger btn-sm btn-circle btn-grad">d</a>
                    <a href="#" class="btn btn-success btn-sm btn-circle btn-grad">s</a>
                    <a href="#" class="btn btn-info btn-sm btn-circle btn-grad">i</a>
                    <a href="#" class="btn btn-warning btn-sm btn-circle btn-grad">w</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-circle btn-grad">1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-circle btn-grad">2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-circle btn-grad">3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-circle btn-grad">4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-circle btn-grad">5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-circle btn-grad">6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-circle btn-grad">def</a>
                    <a href="#" class="btn btn-primary btn-lg btn-circle btn-grad">pri</a>
                    <a href="#" class="btn btn-danger btn-lg btn-circle btn-grad">dan</a>
                    <a href="#" class="btn btn-success btn-lg btn-circle btn-grad">suc</a>
                    <a href="#" class="btn btn-info btn-lg btn-circle btn-grad">inf</a>
                    <a href="#" class="btn btn-warning btn-lg btn-circle btn-grad">war</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-circle btn-grad">m-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-circle btn-grad">m-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-circle btn-grad">m-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-circle btn-grad">m-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-circle btn-grad">m-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-circle btn-grad">m-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->



        <div class="col-lg-12">
            <div class="box inverse">
                <header>
                    <div class="icons"><i class="fa fa-building-o"></i></div>
                    <h5>Rounded & Line Button</h5>
                    <div class="toolbar">
                        <button class="btn btn-primary btn-sm btn-round btn-line" data-toggle="collapse" data-target="#div13">round & line</button>
                    </div>
                </header>
                <div class="body collapse in" id="div13">
                    <h3>Default Button</h3>
                    <a href="#" class="btn btn-default btn-round btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-round btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-round btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-round btn-line">success</a>
                    <a href="#" class="btn btn-info btn-round btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-round btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-round btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-round btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-round btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-round btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-round btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-round btn-line">metis-6</a>
                    <hr>
                    <h4>Mini Button</h4>
                    <a href="#" class="btn btn-default btn-xs btn-round btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-xs btn-round btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-xs btn-round btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-xs btn-round btn-line">success</a>
                    <a href="#" class="btn btn-info btn-xs btn-round btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-xs btn-round btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-xs btn-round btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-xs btn-round btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-xs btn-round btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-xs btn-round btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-xs btn-round btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-xs btn-round btn-line">metis-6</a>
                    <hr>
                    <h4>Small Button</h4>
                    <a href="#" class="btn btn-default btn-sm btn-round btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-sm btn-round btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-sm btn-round btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-sm btn-round btn-line">success</a>
                    <a href="#" class="btn btn-info btn-sm btn-round btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-sm btn-round btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-sm btn-round btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-sm btn-round btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-sm btn-round btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-sm btn-round btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-sm btn-round btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-sm btn-round btn-line">metis-6</a>
                    <hr>
                    <h4>Large Button</h4>

                    <a href="#" class="btn btn-default btn-lg btn-round btn-line">default</a>
                    <a href="#" class="btn btn-primary btn-lg btn-round btn-line">primary</a>
                    <a href="#" class="btn btn-danger btn-lg btn-round btn-line">danger</a>
                    <a href="#" class="btn btn-success btn-lg btn-round btn-line">success</a>
                    <a href="#" class="btn btn-info btn-lg btn-round btn-line">info</a>
                    <a href="#" class="btn btn-warning btn-lg btn-round btn-line">warning</a>

                    <a href="#" class="btn btn-metis-1 btn-lg btn-round btn-line">metis-1</a>
                    <a href="#" class="btn btn-metis-2 btn-lg btn-round btn-line">metis-2</a>
                    <a href="#" class="btn btn-metis-3 btn-lg btn-round btn-line">metis-3</a>
                    <a href="#" class="btn btn-metis-4 btn-lg btn-round btn-line">metis-4</a>
                    <a href="#" class="btn btn-metis-5 btn-lg btn-round btn-line">metis-5</a>
                    <a href="#" class="btn btn-metis-6 btn-lg btn-round btn-line">metis-6</a>
                </div>
                <!-- /.body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col-lg-12 -->
  </div>
<!-- /.row -->
